<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
        .box {
          width: 600px;
          height: 600px;
          background-color: #feea95;
          border-radius: 50%;
          margin: 30px auto;
          position: relative;
          padding: 20px;
        }
        
        .lottery {
          width: 600px;
          height: 600px;
          margin: 0 auto;
          border-radius: 50%;
          overflow: hidden;
          position: relative;
          background-color: #cb9035;
          border: 4px solid #e7915f;
          box-shadow: 0 0 20px #ce6225;
          transition: all 3s ease-in;
        }
        
        .block {
          position: absolute;
          width: 300px;
          height: 300px;
          transform-origin: 100% 100%;
          display: flex;
          justify-content: flex-end;
          align-items: flex-start;
        }
        .block:nth-child(odd) {
          background-color: #ffee9b;
        }
        .block:nth-child(even) {
          background-color: #fffae4;
        }
        .block:nth-child(1) {
          transform: rotate(45deg) skewY(45deg);
        }
        .block:nth-child(2) {
          transform: rotate(90deg) skewY(45deg);
        }
        .block:nth-child(3) {
          transform: rotate(135deg) skewY(45deg);
        }
        .block:nth-child(4) {
          transform: rotate(180deg) skewY(45deg);
        }
        .block:nth-child(5) {
          transform: rotate(225deg) skewY(45deg);
        }
        .block:nth-child(6) {
          transform: rotate(270deg) skewY(45deg);
        }
        .block:nth-child(7) {
          transform: rotate(315deg) skewY(45deg);
        }
        .block:nth-child(8) {
          transform: rotate(360deg) skewY(45deg);
        }
        
        .content {
          transform-origin: 50% 50%;
          transform: skewY(-45deg) rotate(-22.5deg);
          margin-right: 40px;
          margin-bottom: 40px;
          box-sizing: border-box;
          align-self: flex-end;
        }
        .content .img {
          margin: 0 auto;
          width: 100px;
          height: 100px;
          object-fit: contain;
        }
        .content .text {
          text-align: center;
          font-size: 16px;
          margin: 0 auto;
        }
        
        .point {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 150px;
          height: 238px;
          margin-left: -70px;
          margin-top: -119px;
          transform-origin: 50% 59%;
          transition: all 3s ease-in;
        }
        
        </style>
<body>
    <div id="demo">
        <div class="box">
         <div class="lottery" ref="point">
       <div class="block" v-for="item in goods" >
         <div class="content">
                     <img class="img" :src="item.pic" />
                     <div class="text">{{item.name}}</div>
                 </div>
       </div>
         </div>
     <img src="http://img.97pub.com/upload/20190220/1908009016fac3.png" alt="" class="point"  @click="start"   >
     </div>
     </div>
</body>
<script>
    const GRID_NUM = 8;
     new Vue({
        el:'#demo',
        mounted(){
     
    },
    data() {
      return {
        singleAngle:360/GRID_NUM,
        normalRound:4,
        count:0,
         goods:[
             {name:'电脑',pic:'https://2f.zol-img.com.cn/product/193_160x120/873/ce2MbzyykB6o.jpg'},
             {name:'谢谢参与',pic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4074694696,3447224297&fm=200&gp=0.jpg'},
             {name:'相机',pic:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1682092105,2103490467&fm=26&gp=0.jpg'},
             {name:'谢谢参与',pic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4074694696,3447224297&fm=200&gp=0.jpg'},
             {name:'xBox',pic:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3354967965,183170812&fm=26&gp=0.jpg'},
             {name:'谢谢参与',pic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4074694696,3447224297&fm=200&gp=0.jpg'},
             {name:'手机',pic:'https://img.alicdn.com/imgextra/i2/872196368/O1CN0130IW4q1wuaduK32kn_!!872196368.jpg_60x60q90.jpg'},
             {name:'谢谢参与',pic:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4074694696,3447224297&fm=200&gp=0.jpg'},
         ]
      };
    },
    methods: {
        start(){
          let {singleAngle,normalRound} =this;
          let count = this.getRandomInt(0, 7);
          let endAddAngle =normalRound*360+count*singleAngle+singleAngle/2;
          this.$refs.point.style['transform']=`rotate(${endAddAngle}deg)`
          this.count =count
          this.tip()
        },
        getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
        },
        tip(){
          let {goods,count}=this;
          let name =goods[7-count].name
         let msg= name=='谢谢参与'?`很遗憾没有中奖下次再试吧`:`恭喜获得${name} *1`;
         this.timer=setTimeout(()=>{
           alert(msg)
           window.location.reload()
         },3500)
        }
    },
    destroyed(){
    this.timer&&clearTimeout(timer)
  }
    });
</script>
</html>
